<template>
	<view>
		<view class="date-picker-cta">
			<date-range @onChange="changeDate"></date-range>
		</view>
		<view class="stats flex-between">
			<view class="flex-center stats-title">共结算<view class="stats-val">{{total_count}}</view>笔</view>
			<view class="">
				<view class="stats-title flex-right"> 结算合计：<view class="stats-val">¥{{shop_money}}</view>
				</view>
				<view class="stats-title flex-right"> 抽成(含手续费)合计：<view class="stats-val">¥{{platform_money}}</view>
				</view>
			</view>
		</view>
		<view class="records">
			<mescroll-uni class="list-wrap" @getData="getListData" top="280" refs="mescroll" :size="10">
				<block slot="list">
					<view class="list-box" v-if="collect_list.length > 0">
						<view class="record" v-for="(itmes,index) in collect_list" :index="index">
							<view class="record-main">
								<view class="record-field flex-between">
									<view class="record-title">订单号</view>
									<view class="record-value">{{itmes.collection_no}}</view>
								</view>
								<view class="record-field flex-between">
									<view class="record-title">总金额</view>
									<view class="record-value">¥{{itmes.money}}</view>
								</view>
								<view class="record-field flex-between">
									<view class="record-title">结算总金额</view>
									<view class="record-value">¥{{itmes.shop_money}}</view>
								</view>
								<view class="record-field flex-between">
									<view class="record-title">抽成（含手续费）</view>
									<view class="record-value">¥{{itmes.platform_money}}</view>
								</view>
								<view class="record-field flex-between">
									<view class="record-title">结算至银行卡</view>
									<view class="record-value">¥{{itmes.settle_bank}}</view>
								</view>
								<view class="record-field flex-between">
									<view class="record-title">结算至商户余额</view>
									<view class="record-value">¥{{itmes.settle_account}}</view>
								</view>
							</view>
							<view class="record-footer flex-between">
								<view class="record-addon">支付时间：{{itmes.pay_time}}</view>
							</view>
						</view>
						</view>
					<ns-empty v-else text="暂无结算记录"></ns-empty>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import dateRange from '@/components/date-range/date-range.vue';
	export default {
		components: {
			dateRange
		},
		data() {
			return {
				total_count: 0,
				total_money: 0.00,
				shop_money: 0.00,
				platform_money: 0.00,
				dateObj: {
					startDate: '',
					endDate: ''
				},
				collect_list: []
			}
		},
		onShow() {
			if (!this.$util.checkToken('/pages/property/collection/settlement-record')) return;
		},
		methods: {
			changeDate(date) {
				this.dateObj = {...date};
				if (this.dateObj.startDate && this.dateObj.endDate) {
					this.mescroll.resetUpScroll();
				}
			},
			getListData(mescroll) {
				let data = {
					type: 1,
					page_size: mescroll.size,
					page: mescroll.num,
					start: this.dateObj.startDate,
					end: this.dateObj.endDate
				};
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/collection/api/shop/record',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
							this.total_money = res.data.money;
							this.total_count = res.data.count;
							this.shop_money = res.data.shop_money;
							this.platform_money = res.data.platform_money;
						} else {
							this.$util.showToast({ title: msg });
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.collect_list = []; //如果是第一页需手动制空列表
						newArr.forEach(v => {
							v.is_off = 0;
						});					
						
						this.collect_list = this.collect_list.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-picker-cta {
		background-color: #fff;
		padding: 30rpx;
	}

	.stats {
		padding: 30rpx;

		.stats-title,
		.stats-val {
			font-size: 28rpx;
			color: #909399;
			line-height: 40rpx;
		}

		.stats-title {
			margin-bottom: 12rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.stats-val {
			color: #FF6A00;
		}
	}

	.records {
		.record {
			margin-bottom: 20rpx;
			padding: 0 30rpx;
			background-color: #fff;

			.record-main {
				padding: 20rpx 0;
			}

			.record-field {
				margin-bottom: 8rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.record-title {
					font-size: 28rpx;
					color: #909399;
					line-height: 40rpx;
				}

				.record-value {
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}
			}

			.record-footer {
				padding: 20rpx 0;
				border-top: 1px solid #EBEBEB;
			}

			.record-addon {
				font-size: 24rpx;
				color: #909399;
				line-height: 34rpx;
			}
		}

	}

	.records-nodata {
		padding: 48rpx;
		text-align: center;
		font-size: 30rpx;
		color: #909399;
		line-height: 42rpx;
	}
</style>
